<div [dMovable]="true" [handle]="header" [moveEl]="parent">
  <div class="modal-header" #header>
    <d-row [dGutter]="[12, 12]">
      <d-col [dSpan]="22">
        {{ 'app.common.operate.edit.title' | translate: data.title }}
      </d-col>
      <d-col [dSpan]="2" style="text-align: right">
        <d-button icon="icon-close" bsStyle="text-dark" title="{{ 'app.common.operate.close.label' | translate }}"
          (btnClick)="data.onClose()"></d-button>
      </d-col>
    </d-row>
  </div>
  <div [ngSwitch]="datasourceType">
    <div *ngSwitchCase="'Mysql'">
      <app-generic-db-datasource [data]="{ item: data }" #datasource></app-generic-db-datasource>
    </div>
    <div *ngSwitchCase="'Oracle'">
      <app-generic-db-datasource [data]="{ item: data }" #datasource></app-generic-db-datasource>
    </div>
    <div *ngSwitchCase="'PostGreSQL'">
      <app-generic-db-datasource [data]="{ item: data }" #datasource></app-generic-db-datasource>
    </div>
    <div *ngSwitchCase="'JDBC'">
      <app-jdbc-datasource [data]="{ item: data }" #datasource></app-jdbc-datasource>
    </div>
    <div *ngSwitchCase="'Kafka'">
      <app-kafka-datasource [data]="{ item: data }" #datasource></app-kafka-datasource>
    </div>
    <div *ngSwitchCase="'Doris'">
      <app-doris-datasource [data]="{ item: data }" #datasource></app-doris-datasource>
    </div>
    <div *ngSwitchCase="'ClickHouse'">
      <app-generic-db-datasource [data]="{ item: data }" #datasource></app-generic-db-datasource>
    </div>
    <div *ngSwitchCase="'Elasticsearch'">
      <app-elasticsearch-datasource [data]="{ item: data }" #datasource></app-elasticsearch-datasource>
    </div>
    <div *ngSwitchCase="'Druid'">
      <app-druid-datasource [data]="{ item: data }" #datasource></app-druid-datasource>
    </div>
  </div>
</div>
